<template>
	<view class="shop">
		<view class="shop-item" v-for="(item,index) in dataList" :key="index">
			<image class="shop-big" :src="item.bigUrl" mode=""></image>
			<!-- 商品横向滚动 -->
			<scroll-view scroll-x="true" class="scroll-content">
				<view class="scroll-item">
					<Commodity :dataList="item.data" wrap="no-wrap" itemW="260rpx" imgH="220rpx"></Commodity>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import Commodity from '../common/commodity.vue'
	export default {
		data() {
			return {
				shopList: [{
						id: 1,
						imgUrl: "/static/img/product2.jpg",
						name: "新人0元免费领免费领原生木浆超厚抽纸纸巾纸巾纸巾",
						pprice: "29.9元",
						oprice: "59.9元",
						discount: "4.99折"
					},
					{
						id: 2,
						imgUrl: "/static/img/product1.jpg",
						name: "毛绒大衣爆款2022必备不买血亏",
						pprice: "26.9元",
						oprice: "98.9元",
						discount: "3.8折"
					},
					{
						id: 3,
						imgUrl: "/static/img/product3.jpg",
						name: "新人0元免费领免费领原生木浆超厚抽纸纸巾纸巾纸巾",
						pprice: "299.9元",
						oprice: "599.9元",
						discount: "2.7折"
					},
					{
						id: 4,
						imgUrl: "/static/img/product4.jpg",
						name: "新人0元免费领免费领原生木浆超厚抽纸纸巾纸巾纸巾",
						pprice: "129.9元",
						oprice: "159.9元",
						discount: "8.8折"
					},
					{
						id: 5,
						imgUrl: "/static/img/product5.jpg",
						name: "新人0元免费领免费领原生木浆超厚抽纸纸巾纸巾纸巾",
						pprice: "129.9元",
						oprice: "159.9元",
						discount: "8.8折"
					}
				]
			}
		},
		components: {
			Commodity
		},
		props: {
			dataList: Array
		}
	}
</script>

<style lang="scss" scoped>
	.shop-big {
		width: 100%;
		height: 300rpx;
	}

	.scroll-content {
		width: 100%;
		// 不能换行
		white-space: nowrap;

		.scroll-item {
			display: inline-block;
		}
	}
</style>
